<template>
  <div class="dev-val">
    <span v-if="value !== null" class="value" :style="{color: color, background: bgColor}">{{ value }}</span>
    <span v-if="num !== null">{{ num }}台</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: null
    },
    num: {
      type: [String, Number],
      default: null
    },
    color: {
      type: String,
      default: "#02D003"
    },
    bgColor: {
      type: String,
      default: "#D8E5F1"
    }
  }
};
</script>

<style lang="scss" scoped>
.dev-val {
  text-align: center;
  span {
    margin: 0 20px;
  }
  .value {
    height: 20px;
    width: 60px;
    line-height: 20px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 12px;
  }
  &.many {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
